<template>
  <div class="pie-chart-container">
    <h3 class="chart-title">{{ title }}</h3>
    <div class="pie-chart">
      <svg viewBox="0 0 100 100" class="pie-svg">
        <!-- 背景圆环 -->
        <circle
          cx="50"
          cy="50"
          r="45"
          fill="transparent"
          stroke="#1a1a2e"
          stroke-width="8"
        />
        <!-- 数据段 -->
        <path
          v-for="(segment, index) in pieSegments"
          :key="index"
          :d="segment.path"
          fill="transparent"
          :stroke="segment.color"
          stroke-width="8"
          class="pie-segment"
          :style="{
            'animation-delay': `${index * 0.3}s`
          }"
        />
      </svg>
    </div>
    <div class="pie-legend">
      <div 
        v-for="(item, index) in chartData" 
        :key="index"
        class="legend-item"
      >
        <span 
          class="legend-color" 
          :style="{ background: item.color }"
        ></span>
        <span class="legend-text">{{ item.label }}</span>
        <span class="legend-value">{{ item.value }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface PieData {
  label: string
  value: number
  color: string
}

interface Props {
  title: string
  data: PieData[]
}

const props = defineProps<Props>()

const chartData = computed(() => props.data)

// 创建SVG弧形路径
const createArcPath = (centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number) => {
  const start = polarToCartesian(centerX, centerY, radius, endAngle)
  const end = polarToCartesian(centerX, centerY, radius, startAngle)
  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"
  
  return [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ")
}

// 极坐标转笛卡尔坐标
const polarToCartesian = (centerX: number, centerY: number, radius: number, angleInDegrees: number) => {
  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0
  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  }
}

const pieSegments = computed(() => {
  const total = props.data.reduce((sum, item) => sum + item.value, 0)
  let cumulativeAngle = 0
  
  return props.data.map((item) => {
    const percentage = item.value / total
    const angle = percentage * 360
    const startAngle = cumulativeAngle
    const endAngle = cumulativeAngle + angle
    
    const path = createArcPath(50, 50, 35, startAngle, endAngle)
    
    cumulativeAngle += angle
    
    return {
      path,
      color: item.color,
      percentage: Math.round(percentage * 100)
    }
  })
})
</script>

<style scoped>
.pie-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #00d4ff;
  margin: 0 0 15px 0;
  text-align: center;
}

.pie-chart {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
}

.pie-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pie-segment {
  stroke-linecap: round;
  transition: stroke-width 0.3s ease;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

.pie-segment:hover {
  stroke-width: 15;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  flex: 1;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.legend-text {
  color: #ccc;
  flex: 1;
  font-size: 10px;
}

.legend-value {
  color: #00d4ff;
  font-weight: bold;
  font-size: 11px;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
  min-width: 30px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pie-chart {
    width: 100px;
    height: 100px;
  }
  
  .chart-title {
    font-size: 12px;
  }
  
  .legend-item {
    font-size: 10px;
  }
  
  .legend-color {
    width: 10px;
    height: 10px;
  }
}
</style>
